<template>
	<view class="content">
    <view class="uni-flex uni-column">
             <view class="flex-item flex-item-V uni-bg-red" v-for="(item, index) in commentList">{{item.name}}:{{item.content}}</view>
    </view>
    <input class="uni-input" focus placeholder="自动获得焦点" @confirm="sendMessage"/>
	</view>
</template>

<script lang="ts">
  import Vue from 'vue';
	import {mapState, mapGetters} from 'vuex';

	export default Vue.extend({
		data() {
			return {
        index: ''

			}
		},
    onLoad(data){
      this.index = data.index
    },
		onShow() {
      this.$store.dispatch('joinRoom', {index: this.index}).then((res) =>{

      })
		},
		computed: {
      ...mapGetters(["commentList"]) // 获取聊天列表
		},
		methods: {
      sendMessage (event) {
        console.log(event.detail.value)
        this.$store.dispatch('sendMessage', {index: this.index, value: event.detail.value}).then((res) =>{

        })
      }
		}
	});
</script>

<style>
	.content {
		text-align: center;
		height: 400upx;
	}
    .logo{
        height: 200upx;
        width: 200upx;
        margin-top: 200upx;
    }
	.title {
		font-size: 36upx;
		color: #8f8f94;
	}
</style>
